<template>
  <div class="app-container" emo="hsm">
    <el-upload
      :file-list="list"
      :action="uploadPhotoUrl"
      :data="getUploadParam"
      :http-request="handleUploadBefore"
      :on-success="handleUploadSuccess"
      :on-remove="handleRemove"
      list-type="picture"
      multiple
      class="avatar-uploader"
      style="float: left">
      <el-select v-model="currentCategory" placeholder="请选择会场"@change="getPhoto">
        <el-option
          v-for="item in category"
          :key="item.id"
          :label="item.key"
          :value="item.id"/>
      </el-select>
      <el-select v-model="currentQuality" placeholder="请选择图片压缩质量" style="margin-left: 15px;" >
        <el-option
          v-for="item in quality"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button type="primary" style="margin-left: 15px;">添加图片</el-button>
    </el-upload>
    <br>
    <br>
    <div>
      <el-dialog :visible.sync="dialogVisible">
        <img :src="dialogImageUrl" width="100%" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getList, delPhoto } from '@/api/photo'
import { convertImageUrl, _hostUrl } from '@/utils/aws1903'
import * as ImgCompress from '@/utils/photoCompress'

export default {
  filters: {
    hostUrlFilter(url) {
      return convertImageUrl(url)
    }
  },
  data() {
    return {
      list: [],
      category: null,
      getUploadParam: {
        category: 1
      },
      imageUrl: '',
      currentCategory: 1,
      listLoading: true,
      dialogImageUrl: '',
      dialogVisible: false,
      uploadPhotoUrl: _hostUrl + '/bs/uploadPhoto',
      quality: [{
        value: 0.5,
        label: '清晰'
      }, {
        value: 0.4,
        label: '一般'
      }, {
        value: 0.2,
        label: '模糊'
      }],
      currentQuality: ''
    }
  },
  created() {
    this.listLoading = true
    getList(1).then(response => {
      this.list = response.data.list
      this.category = response.data.category
      this.getUploadParam.category = 1
      this.listLoading = false
    })
  },
  mounted() {
    // 添加图片预览
    var ele = document.getElementsByClassName('avatar-uploader')[0]
    ele.addEventListener('click', this.previewImage)
  },
  methods: {
    getPhoto(category) {
      this.listLoading = true
      getList(category).then(response => {
        this.list = response.data.list
        this.category = response.data.category
        this.getUploadParam.category = this.currentCategory
        this.listLoading = false
      })
    },
    addPhoto() {
      this.listLoading = true
      add(this.form.category, this.form.imgUrl).then(response => {
        this.list = response.list
        this.category = response.category
        this.listLoading = false
      })
    },
    handleRemove(file, fileList) {
      this.listLoading = true
      delPhoto(this.currentCategory, file.id).then(response => {
        this.listLoading = false
      })
    },
    handleUploadSuccess(response, file, fileList) {

    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url
      this.dialogVisible = true
    },
    handleUploadBefore(req) {
      if (req.data.category == '') {
        this.$message({
          message: '请选择上传的会场',
          type: 'warning'
        })
        return
      }
      const that = this
      const newFile = req.file
      const imgName = newFile.name
      console.log('file.size: ' + newFile.size)
      const imgBase = ''
      const reader = new FileReader()
      // if (newFile.size / 1024 / 1024 > 2) {
      ImgCompress.photoCompress(newFile, { quality: this.currentQuality }, function(blob) {
        const { lastModified, type } = newFile
        const compress_file = new File([blob], imgName, { type: type, lastModified: lastModified })
        console.log('compress_file size: ' + compress_file.size)
        // FormData 对象
        var form = new FormData()
        // 文件对象
        form.append('file', compress_file)
        // 其他参数
        form.append('category', req.data.category)
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest()
        xhr.open('post', req.action, true)
        // xhr.upload.addEventListener("progress", vm.progressFunction, false); //监听上传进度
        xhr.onload = function() {
          // vm.Form.playUrl = xhr.response; //接收上传到阿里云的文件地址
          // vm.$message({
          //   message: '恭喜你，上传成功!',
          //   type: 'success'
          // });
        }
        xhr.send(form)
      })
      // }
    },
    previewImage(e) {
      if (e.target.src) {
        this.handlePictureCardPreview(e.target.src)
      }
    }
  }
}
</script>
<style>
  [emo=hsm] .el-upload-list--picture .el-upload-list__item {
    float: left;
    width: 150px;
    height: 150px;
    line-height: 150px;
    margin-left: 5px;
  }

  [emo=hsm] .el-upload-list__item-name {
    display: none;
  }

  [emo=hsm] .el-upload-list--picture .el-upload-list__item-thumbnail {
    width: 110px;
    height: 110px;
    margin-left: -71px;
    margin-top: 10px;
  }
</style>
